import type { ConfigProviderThemeVars } from 'wot-design-uni';

export type ColorVars = {
  primary?: string;
  success?: string; // 成功色
  warning?: string; // 警告色
  danger?: string; // 危险出错色
  secondary?: string; //辅色
  purple?: string; //紫色
  yellow?: string; // 黄色
  blue?: string; // 蓝色
  info?: string; // 信息色
};

export interface ThemeConfig extends ConfigProviderThemeVars, ColorVars {}

/**
 * 组件库主题配置 ------------------------------
 */
export const themeConfig: ThemeConfig = {
  primary: '#e27e85', // 主题色
  success: '#34d19d', // 成功色
  warning: '#f0883a', // 警告色
  danger: '#fa4350', // 危险出错色
  purple: '#8268de', // 紫色
  secondary: '#8268de',
  yellow: '#f0cd1d', // 黄色
  blue: '#2bb3ed', // 蓝色
  info: '#909399', // 信息色
  colorWhite: 'rgb(255, 255, 255)', // 用于mix的白色
  colorBlack: 'rgb(0, 0, 0)' // 用于mix的黑色
};

export const colorThemes = {
  light: {
    // 字体颜色
    textPrimary: '#333333', // 主要文字颜色（深灰色）
    textSecondary: '#666666', // 次要文字颜色（灰色）
    textDisabled: '#cccccc', // 禁用文字颜色（浅灰色）
    textLight: '#ffffff', // 白色字体
    textDark: '#000000', // 黑色字体

    // 背景颜色
    bgPrimary: '#fafafa', // 白色背景
    bgSecondary: '#f4f4f4', // 浅灰色背景
    bgCard: '#ffffff', // 卡片背景（灰白色）
    bgHover: '#e9e9e9', // 鼠标悬停时的背景色
    bgActive: '#d1d1d1', // 按钮激活时的背景色
    bgDisabled: '#f5f5f5' // 禁用时背景色
  },
  dark: {
    // 字体颜色
    textPrimary: '#ffffff', // 主要文字颜色（白色）
    textSecondary: '#b0b0b0', // 次要文字颜色（浅灰色）
    textDisabled: '#6c6c6c', // 禁用文字颜色（中灰色）
    textLight: '#000000', // 黑色字体
    textDark: '#ffffff', // 白色字体（如果你想用白色）

    // 背景颜色
    bgPrimary: 'rgb(0, 0, 0)', // 深色背景
    bgSecondary: '#121212', // 更深的灰色背景
    bgCard: '#1b1b1b', // 卡片背景（深灰色）
    bgHover: '#3a3a3a', // 鼠标悬停时的背景色（更深）
    bgActive: '#505050', // 按钮激活时的背景色（暗灰色）
    bgDisabled: '#3a3a3a' // 禁用时背景色（更深灰色）
  }
};

export const getVariables = () => {
  const scssThems = Object.keys(colorThemes.light).reduce((acc, key) => {
    acc[`$u-${key}`] = `var(--byt-${key})`;
    return acc;
  }, {});
  return scssThems;
};

/**
 * 根据 darker lighter 生成light和dark的颜色 css变量与颜色
 */
const lightDarkTheme = () => {
  const thems = Object.keys(colorThemes.light).reduce((acc, key) => {
    acc[key] = `var(--byt-${key})`;
    return acc;
  }, {});
  return thems;
};

/**
 * unocss 使用的颜色
 */
export const unoTheme = {
  ...lightDarkTheme(),
  primary: 'var(--byt-color-primary)',
  success: 'var(--byt-color-success)',
  secondary: 'var(--byt-color-secondary)',
  warning: 'var(--byt-color-warning)',
  danger: 'var(--byt-color-danger)',
  purple: 'var(--byt-color-purple)',
  yellow: 'var(--byt-color-yellow)',
  blue: 'var(--byt-color-blue)',
  info: 'var(--byt-color-info)'
};

/**
 * 生成css变量
 */

export const initCssVars = (theme: 'light' | 'dark', themeVars: ThemeConfig) => {
  //后续确定了ui规范可以直接定义mixVars 的颜色值
  const mixVars = {};
  //生成了对应的颜色
  Object.keys(colorThemes[theme]).forEach(key => {
    mixVars[`--byt-${key}`] = colorThemes[theme][key] || colorThemes['light'][key];
  });

  const { primary, success, warning, danger, purple, yellow, blue, info, secondary } = themeVars;

  return {
    ...mixVars,
    '--wot-color-white': 'rgb(255, 255, 255)',
    '--wot-color-black': 'rgb(0, 0, 0)',
    '--wot-color-success': success,
    '--wot-color-warning': warning,
    '--wot-color-danger': danger,
    '--wot-color-purple': purple,
    '--wot-color-yellow': yellow,
    '--wot-color-blue': blue,
    '--wot-color-info': info,
    '--wot-color-theme': primary,
    '--byt-color-primary': primary,
    '--byt-color-secondary': secondary,
    '--byt-color-white': 'rgb(255, 255, 255)',
    '--byt-color-black': 'rgb(0, 0, 0)',
    '--byt-color-success': success,
    '--byt-color-warning': warning,
    '--byt-color-danger': danger,
    '--byt-color-purple': purple,
    '--byt-color-yellow': yellow,
    '--byt-color-blue': blue,
    '--byt-color-info': info
  };
};

/**
 * 组件库颜色映射
 */

export const themeConfigMapping = (themeConfig: ThemeConfig): ConfigProviderThemeVars => {
  const {
    primary: colorTheme,
    success: colorSuccess,
    warning: colorWarning, // 警告色
    danger: colorDanger, // 危险出错色
    purple: colorPurple, //紫色
    yellow: colorYellow, // 黄色
    blue: colorBlue, // 蓝色
    info: colorInfo, // 信息色
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    secondary,
    ...otherConfig
  } = themeConfig;

  return {
    ...otherConfig,
    colorTheme,
    colorSuccess,
    colorWarning,
    colorDanger,
    colorPurple,
    colorYellow,
    colorBlue,
    colorInfo
  };
};
